<template>
  <div v-show="show" class="load-container">
    <!-- 样式1 -->
    <div v-if="type === 'first'" class="box-content first">
      <div class="box-loading"></div>
    </div>

    <!-- 样式2 -->
    <div v-if="type === 'second'" class="box-content second">
      <div class="load load-first"></div>
      <div class="load load-second"></div>
      <div class="load"></div>
    </div>

    <!-- 样式3 -->
    <div v-if="type === 'third'" class="box-content third">
      <div class="container">
        <div class="box-loading box-loading-first"></div>
        <div class="box-loading box-loading-second"></div>
        <div class="box-loading box-loading-third"></div>
        <div class="box-loading box-loading-fourth"></div>
        <div class="box-loading box-loading-fifth"></div>
      </div>
    </div>

    <!-- 文字 -->
    <h3 class="loading-title">
      {{ title }}
      <template v-if="showDotLoading">
        <span class="title-animate-first">·</span>
        <span class="title-animate-second">·</span>
        <span class="title-animate-third">·</span>
      </template>
    </h3>
  </div>
</template>

<script lang="ts" setup name="proLoadingTwo">
  interface PropsType {
    // 加载提示文字
    title?: string
    // 是否显示加载提示文字
    showTitle?: boolean
    // 是否显示
    show: boolean
    // 加载动画类型
    type?: 'first' | 'second' | 'third'
    // 是否显示三个加载点
    showDotLoading?: boolean
  }

  withDefaults(defineProps<PropsType>(), {
    title: '正在加载中',
    show: false,
    type: 'first',
    showDotLoading: true,
    showTitle: true
  })
</script>

<style lang="less" scoped>
  .load-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    background: #fff;
    // background: rgba(0, 0, 0, 0.2);
    z-index: 2009;
    .box-content {
      // position: absolute;
      // left: 0;
      // right: 0;
      // top: 0;
      // bottom: 0;
    }
    .loading-title {
      margin-top: 20px;
      color: var(--primary-color);
      .title-animate-first {
        opacity: 0;
        animation: titleAnimate-first 1s linear infinite;
      }
      .title-animate-second {
        opacity: 0;
        animation: titleAnimate-second 1s linear infinite;
      }
      .title-animate-third {
        opacity: 0;
        animation: titleAnimate-third 1s linear infinite;
      }
      @keyframes titleAnimate-first {
        0% {
          opacity: 0;
        }
        25% {
          opacity: 1;
        }
        50% {
          opacity: 1;
        }
        75% {
          opacity: 1;
        }
        100% {
          opacity: 0;
        }
      }
      @keyframes titleAnimate-second {
        0% {
          opacity: 0;
        }
        25% {
          opacity: 0;
        }
        50% {
          opacity: 1;
        }
        75% {
          opacity: 1;
        }
        100% {
          opacity: 0;
        }
      }
      @keyframes titleAnimate-third {
        0% {
          opacity: 0;
        }
        25% {
          opacity: 0;
        }
        50% {
          opacity: 0;
        }
        75% {
          opacity: 1;
        }
        100% {
          opacity: 0;
        }
      }
    }
  }
  .first {
    .box-loading {
      position: relative;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      width: 50px;
      height: 50px;
      margin: auto;
      &:before {
        content: '';
        width: 50px;
        height: 5px;
        background: #000;
        opacity: 0.1;
        position: absolute;
        top: 59px;
        left: 0;
        border-radius: 50%;
        animation: shadow 0.5s linear infinite;
      }
      &:after {
        content: '';
        width: 50px;
        height: 50px;
        background: var(--primary-color);
        animation: animate 0.5s linear infinite;
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 3px;
      }
      @keyframes animate {
        17% {
          border-bottom-right-radius: 3px;
        }
        25% {
          transform: translateY(9px) rotate(22.5deg);
        }
        50% {
          transform: translateY(18px) scale(1, 0.9) rotate(45deg);
          border-bottom-right-radius: 40px;
        }
        75% {
          transform: translateY(9px) rotate(67.5deg);
        }
        100% {
          transform: translateY(0) rotate(90deg);
        }
      }
      @keyframes shadow {
        0%,
        100% {
          transform: scale(1, 1);
        }
        50% {
          transform: scale(1.2, 1);
        }
      }
    }
  }

  .second {
    .load {
      width: 20px;
      height: 20px;
      background-color: var(--primary-color);

      border-radius: 100%;
      display: inline-block;
      -webkit-animation: bouncedelay 1.4s infinite ease-in-out;
      animation: bouncedelay 1.4s infinite ease-in-out;
      /* Prevent first frame from flickering when animation starts */
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;
    }
    .load-first {
      -webkit-animation-delay: -0.32s;
      animation-delay: -0.32s;
    }
    .load-second {
      -webkit-animation-delay: -0.16s;
      animation-delay: -0.16s;
    }

    @-webkit-keyframes bouncedelay {
      0%,
      80%,
      100% {
        -webkit-transform: scale(0);
      }
      40% {
        -webkit-transform: scale(1);
      }
    }

    @keyframes bouncedelay {
      0%,
      80%,
      100% {
        transform: scale(0);
        -webkit-transform: scale(0);
      }
      40% {
        transform: scale(1);
        -webkit-transform: scale(1);
      }
    }
  }
  .third {
    .container {
      width: 100px;
      height: 60px;
      text-align: center;
      font-size: 10px;
      .box-loading {
        background-color: var(--primary-color);
        height: 100%;
        width: 6px;
        display: inline-block;
        margin: 0 1px;

        -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
        animation: stretchdelay 1.2s infinite ease-in-out;
      }
      .box-loading-second {
        -webkit-animation-delay: -1.1s;
        animation-delay: -1.1s;
      }
      .box-loading-third {
        -webkit-animation-delay: -1s;
        animation-delay: -1s;
      }
      .box-loading-fourth {
        -webkit-animation-delay: -0.9s;
        animation-delay: -0.9s;
      }
      .box-loading-fifth {
        -webkit-animation-delay: -0.8s;
        animation-delay: -0.8s;
      }
    }
    @-webkit-keyframes stretchdelay {
      0%,
      40%,
      100% {
        -webkit-transform: scaleY(0.4);
      }
      20% {
        -webkit-transform: scaleY(1);
      }
    }
    @keyframes stretchdelay {
      0%,
      40%,
      100% {
        transform: scaleY(0.4);
        -webkit-transform: scaleY(0.4);
      }
      20% {
        transform: scaleY(1);
        -webkit-transform: scaleY(1);
      }
    }
  }
</style>
